<template>
  <!-- 1.人物 2.组织机构 3.武器装备 4.目标设施 5.部队 6.事件 -->
  <div>
    <!-- 头部 -->
    <PdfCom :pdfTF="pdfTF" @clickPDF="clickPDF" />
    <Header />
    <div class="detail-container flex">
      <BasicInformation />
      <div class="content-wrap">
        <SelectTab @changeTab="changeTab" />
        <div class="current-view">
          <transition name="fade-transform" mode="out-in">
            <component
              :pageCurrent="pageCurrent"
              :is="currentView"
              :socialInfo="socialInfo"
              :mediaData="mediaData"
              :total="total"
              :aTPageSize="aTPageSize"
              :getSocialChartData="getSocialChartData"
              :SocialTalkData="SocialTalkData"
              :sPageSize="sPageSize"
              :sTotal="sTotal"
              :zhishiData="zhishiData"
              @getSocialTalkPage="getSocialTalkPage"
              @getMediaData="getMediaData"
              @clickPDF="clickPDF"
            ></component>
          </transition>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/header";
import BasicInformation from "@/components/basicInformation";
import SelectTab from "@/components/selectTab";
import basicData from "@/views/mainDetail/basicData";
import knowledgeMap from "@/views/mainDetail/knowledgeMap";
import researchResult from "@/views/mainDetail/researchResult";
import societyActivity from "@/views/mainDetail/societyActivity";
import tendency from "@/views/mainDetail/tendency";
import PdfCom from "@/components/PdfCom";

export default {
  created() {
    // axios 前缀存储
    this.$api.axiosUrlset();
    //
    let arr = [
      "basicData",
      // "knowledgeMap",
      "societyActivity",
      "tendency",
      "researchResult",
    ];
    // console.log("我太难了333332", this.$route.query);
    // for (let i in this.$route.query) {
    //   console.log(i);
    //   localStorage.setItem(i, JSON.stringify(this.$route.query[i]));
    //   console.log(i, localStorage.getItem(i));
    // }
    // this.$route.params = this.$route.query;
    // 是否有选中的tab：
    let s = sessionStorage.tabId || localStorage.tabId;
    // console.log("你到底是", s);
    if (arr.includes(s)) {
      this.currentView = s;
      this.changeTab(s);
    }
  },
  mounted() {
    // console.log("我太难了2222", this.$route.params);
    localStorage.setItem("id", JSON.stringify(this.$route.params.id));
    // console.log("这个ID要保存", localStorage.getItem("id"));
  },
  components: {
    Header,
    BasicInformation,
    SelectTab,
    basicData,
    knowledgeMap,
    researchResult,
    societyActivity,
    tendency,
    PdfCom,
  },
  props: {
    keyValue: {
      type: String,
      default: () => "",
    },
  },
  data() {
    return {
      pdfTF: false, //电子书是否显示
      currentView: "basicData",
      inputValue: "",
      socialInfo: {}, //社交动态数据
      getSocialChartData: {}, //社交动态折线图数据
      mediaData: [], //动向情报-媒体报道数据
      // mediaActivityChart: [], //动态情报-媒体报道折线数据
      SocialTalkData: {}, //社交言论数据
      zhishiData: {}, //知识图谱数据
      nameData: "",
      // 这2个是动向情报的
      aTPageSize: 8, //页数个数
      // 这是几啊
      pageCurrent: 1,
      total: 0, //总个数

      //社交言论数据
      sPageSize: 5, //页数个数
      sTotal: 0, //总个数
    };
  },
  watch: {
    keyValue: {
      deep: true,
      immediate: true,
      handler(n) {
        this.inputValue = n;
      },
    },
  },
  computed: {},
  methods: {
    clickPDF(tf) {
      this.pdfTF = tf;
    },
    // 社交动态请求数据方法
    getSocialInfo(value) {
      this.$api.getSocialInfo(value).then((res) => {
        // console.log(res);
        this.socialInfo = res; //社交动态数据
      });
    },
    // 社交动态折线图部分请求数据方法
    getSocialChart(value) {
      this.$api.getSocialChart(value).then((res) => {
        // console.log(res);
        this.getSocialChartData = res; //社交动态数据
      });
    },
    getMediaData(pageNum) {
      // console.log(111111111111111, localStorage.getItem("bfId"), pageNum);
      this.getMedia(localStorage.getItem("bfId"), pageNum);
    },
    // 动向情报-媒体报道数据请求
    getMedia(name, pageNum) {
      this.$api.getMedia(name, pageNum).then((res) => {
        console.log("动向情报有值吗", res);
        this.total = res.total || 0;
        this.mediaData = res.articles;
        this.aTPageSize = res.pageSize;
        this.pageCurrent = res.pageCurrent;
        // this.mediaData = this.pageFun(res, this.aPageSize);
      });
    },
    //分页Fun： 数组，每页个数：num
    pageFun(arr, num) {
      let a = [];
      arr.forEach((item, idx) => {
        let i = Math.floor(idx / num);
        if (!a[i]) {
          a[i] = [];
        }
        a[i].push(item);
      });
      return a;
    },
    // 动向情报-媒体报道折线图数据请求
    // getMediaActivity(value) {
    //   this.$api.getMediaActivity(value).then((res) => {
    //     console.log(res);
    //     this.mediaActivityChart = res;
    //   });
    // },
    // 知识图谱
    getRelationData(value) {
      this.$api.getRelation(value).then((res) => {
        // console.log("知识图谱：", res);
        this.zhishiData = res;
      });
    },
    getSocialTalkPage(pageNum) {
      this.getSocialTalkData(localStorage.getItem("bfId"), "", pageNum);
    },
    // 社交言论
    getSocialTalkData(value, accountId, pageNum) {
      this.$api.getSocialTalk(value, accountId, pageNum).then((res) => {
        // console.log("社交言论", res);
        this.sTotal = res.total;
        this.SocialTalkData = res;
        // this.sTotal = res.length || 0;
        // this.SocialTalkData = this.pageFun(res, this.sPageSize); //关系图谱数据
      });
    },
    changeTab(id, val) {
      // console.log("这是：", id);
      // sessionStorage.currentView = id;
      this.currentView = id;
      // 基础资料
      // if (id == "basicData") {
      //   console.log(this.$route.params.name);
      // }
      // 社交动态tab页面
      if (id == "societyActivity") {
        // console.log(this.$route.params.id, this.$route.params.flag);
        if (this.$route.params.id) {
          // 请求社交动态数据
          this.getSocialInfo(this.$route.params.id);
          // 有页数：
          let pageNum = 1;
          if (sessionStorage.currentPage) {
            pageNum = parseInt(sessionStorage.currentPage);
          }
          // 请求社交言论数据
          this.getSocialTalkData(this.$route.params.id, "", pageNum);
        } else {
          let pageNum = 1;
          if (sessionStorage.currentPage) {
            pageNum = parseInt(sessionStorage.currentPage);
          }
          if (localStorage.getItem("bfId")) {
            // 请求社交动态数据
            this.getSocialInfo(localStorage.getItem("bfId"));
            // 请求社交言论数据
            this.getSocialTalkData(localStorage.getItem("bfId"), "", pageNum);
          }
        }
      }
      //动态情报
      if (id == "tendency") {
        // console.log("77777777777777777777777777777", this.$route.params.name);
        let pageNum = 1;
        if (sessionStorage.currentPage) {
          pageNum = parseInt(sessionStorage.currentPage);
        }
        if (this.$route.params.id) {
          // 请求动态情报  媒体报道数据
          this.getMedia(this.$route.params.id, pageNum);
        } else {
          if (localStorage.getItem("bfId")) {
            this.getMedia(localStorage.getItem("bfId"), pageNum);
          }
        }
      }
      // 知识图谱
      if (id == "knowledgeMap") {
        // console.log(localStorage.getItem("id"));
        if (this.$route.params.id) {
          this.getRelationData(this.$route.params.id);
        } else {
          if (localStorage.getItem("bfId")) {
            this.getRelationData(localStorage.getItem("bfId"));
          }
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
// @import "~@/styles/mixin.scss";
.detail-container {
  justify-content: center;
  margin-top: 0.2rem;
  height: 9.92rem;
  margin-bottom: 0.2rem;
  // padding: 0 0.3rem;
  .content-wrap {
    margin-left: 0.2rem;
    width: 14.52rem;
    .current-view {
      margin-top: 0.1rem;
      width: 100%;
    }
  }
}
</style>
